import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { disableApi } from '../api/user'
import { meApi, updateInfoApi, listApi, deleteApi, addUserApi } from '../api/userInfo'

const userInfoLoading = ref(true)
const userInfoForm = reactive({})
const userInfoDisabled = ref(false)
const userListLoading = ref(true)
const userList = reactive({
  arr: []
})
const userSearchForm = reactive({})
const editUserForm = reactive({})
const addUserForm = reactive({
  newUser: {}
})
const editUserVisible = ref(false)
const deleteUserVisible = ref(false)
const addUserVisible = ref(false)
const futureDeleteUsername = ref()
const currentPage = ref(1)
const pageSize = ref(7)
const total = ref(0)

async function getUserInfo() {
  const { data: res } = await meApi()
  if (!res.success) {
    ElMessage.error({
      message: res.msg,
      dangerouslyUseHTMLString: true
    })
    return
  }
  Object.assign(userInfoForm, res.data)
  setTimeout(() => {
    userInfoLoading.value = false
  }, 500)
}
async function updateUserInfo() {
  const user = JSON.parse(localStorage.getItem('user'))
  const { data: res } = await updateInfoApi({
    username: user.username,
    name: userInfoForm.name,
    age: userInfoForm.age,
    sex: userInfoForm.sex,
    birthday: userInfoForm.birthday,
    phone: userInfoForm.phone,
    email: userInfoForm.email
  })
  if (!res.success) {
    ElMessage.error({
      message: res.msg,
      dangerouslyUseHTMLString: true
    })
    return
  }
  userInfoDisabled.value = false
  ElMessage.success(res.data)
}
async function getUserList() {
  userListLoading.value = true
  const { data: res } = await listApi(userSearchForm, currentPage.value, pageSize.value)
  userList.arr = res.data.records
  total.value = res.data.total
  setTimeout(() => {
    userListLoading.value = false
  }, 500)
}
async function disableUser(username) {
  const { data: res } = await disableApi(username)
  if (!res.success) {
    ElMessage.error({
      message: res.msg,
      dangerouslyUseHTMLString: true
    })
    return
  }
  for (const user of userList.arr) {
    if (user.username === username) {
      user.status = user.status ^ 1
      break
    }
  }
  ElMessage.success(res.data)
}
async function deleteUser() {
  if (!futureDeleteUsername.value) {
    return
  }
  const { data: res } = await deleteApi(futureDeleteUsername.value)
  if (!res.success) {
    ElMessage.error({
      message: res.msg,
      dangerouslyUseHTMLString: true
    })
  } else {
    ElMessage.success(res.data)
  }
  deleteUserVisible.value = false
  futureDeleteUsername.value = ''
  getUserList()
}
async function editUser() {
  const { data: res } = await updateInfoApi(editUserForm)
  if (!res.success) {
    ElMessage.error({
      message: res.msg,
      dangerouslyUseHTMLString: true
    })
    return
  }
  getUserList()
  ElMessage.success(res.data)
  editUserVisible.value = false
}
async function addUser() {
  const { data: res } = await addUserApi(addUserForm.newUser)
  if (!res.success) {
    ElMessage.error({
      message: res.msg,
      dangerouslyUseHTMLString: true
    })
    return
  }
  addUserForm.newUser = {}
  getUserList()
  ElMessage.success(res.data)
  addUserVisible.value = false
}

function preDeleteUser(username) {
  deleteUserVisible.value = true
  futureDeleteUsername.value = username
}
function preEditUser(user) {
  Object.assign(editUserForm, user)
  editUserVisible.value = true
}
function cancelAddUser() {
  addUserVisible.value = false
  addUserForm.newUser = {}
}

export const useUserInfo = () => {
  return {
    userInfoLoading,
    userInfoForm,
    userInfoDisabled,
    userListLoading,
    userList,
    userSearchForm,
    deleteUserVisible,
    currentPage,
    pageSize,
    total,
    editUserForm,
    editUserVisible,
    addUserVisible,
    addUserForm,
    getUserInfo,
    updateUserInfo,
    getUserList,
    disableUser,
    preDeleteUser,
    deleteUser,
    preEditUser,
    editUser,
    addUser,
    cancelAddUser
  }
}
